import { useAsync } from '@/hook';
import { PageContainer } from '@ant-design/pro-layout'
import { Button, message, Popconfirm, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table/interface';
import React, { createContext, FC, useCallback } from 'react'
import { useState } from 'react';
import AddDict from './components/addDict';
import { Dict, IData } from './data';
import { _getDicts, _removeDict } from './service';

export interface DictIndexProps {
}

export const DemoContext = createContext(0);

const DictIndex: FC<DictIndexProps> = () => {

    const columns: ColumnsType<Dict> = [
        {
            title: '序号',
            dataIndex: 'name',
            render: (text, record, index) => {
                return index;
            }
        },
        {
            title: '字典名称',
            dataIndex: 'dictKeyName',
            key: 'dictKeyName',
            width: '12%',
        },
        {
            title: '字典key',
            dataIndex: 'dictKey',
            width: '',
        },
        {
            title: '字典项集',
            dataIndex: 'dictKey',
            align: "center",
            render: (text, record, _) => {
                return record.items.map(item => `${item.dictName}(${item.dictVal})，`);
            }
        },
        {
            title: '操作',
            dataIndex: '123',
            width: '20%',
            align: 'center',
            render: (text, record, index) => (
                <Space size={20} key={record.id}>
                    <Button type="primary" onClick={() => (setDict(record), setVisible(true))}>
                        编辑
                    </Button>

                    <Popconfirm
                        title="您确定要删除此条字典吗？"
                        onConfirm={() => removeDict(record.id)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [visible, setVisible] = useState(false);
    let [reload, setReload] = useState(0);
    const [dict, setDict] = useState<Dict | {}>({});
    const [page, setPage] = useState(1)

    const dictsRes = useAsync<PromiseFun<IResponse<IData>>>(() => _getDicts({ page }), [reload]);
    const { list, total } = dictsRes.result?.data || {} as IData;

    const changeVisible = useCallback((bool: boolean) => {
        setVisible(bool);
    }, []);
    const refresh = useCallback(() => setReload(reload += 1), []);
    const removeDict = async (id: string) => {
        await _removeDict({ id })
        message.success({ content: '删除成功！' })
        setReload(reload += 1);
    }
    return (
        <>
            <PageContainer
                content={
                    <div>
                        <Button type="primary" onClick={() => (changeVisible(true),setDict({}))}>
                            新增字典
                        </Button>
                        <Button onClick={() => setReload(reload += 1)}>加一</Button>
                    </div>
                }
            >
                <Table columns={columns} dataSource={list} rowKey="id" pagination={{ total, current: page, onChange: (page) => setPage(page) }}></Table>


                <DemoContext.Provider value={reload}>
                    <AddDict item={dict as Dict} visible={visible} changeVisible={changeVisible} setReload={refresh} setDict={setDict}></AddDict>
                </DemoContext.Provider>
            </PageContainer>

        </>
    )
}

export default DictIndex
